<template>
	<view class="expenseDetail">
		<patient-card></patient-card>
		<view class="amountCard">
			<view class="title">费用明细</view>
			<view
				class="listItem"
				v-for="v in loginStore.expenseData.medicineFeeDetails"
			>
				<view class="info">
					<text>{{ v.name }}</text>
					<text>单价：￥{{ v.price }} 数量：{{ v.count }}</text>
				</view>
				<view class="amount">
					<text>￥{{ v.total }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import PatientCard from './PatientCard.vue'
import { useLoginStore } from '../../../store/loginStore.js'
const loginStore = useLoginStore()
console.log(loginStore.expenseData)
</script>

<style lang="less" scoped>
.expenseDetail {
	padding: 30rpx;

	.amountCard {
		margin-top: 30rpx;
		padding: 30rpx;
		border: 1px solid #f2f2f2;

		.title {
			color: #aaa;
			font-size: 28rpx;
			height: 70rpx;
			border-bottom: 1px solid #f2f2f2;
		}

		.listItem {
			display: flex;
			height: 140rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;

			&:last-child {
				border: none;
			}

			.info {
				color: #000;
				font-size: 28rpx;
				display: flex;
				height: 140rpx;
				flex-direction: column;
				justify-content: space-evenly;

				text {
					&:nth-child(2) {
						color: #aaa;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
</style>
